<template>
    <div class="index">
              <div class="login_img">
                  <img v-if ="isShow"  :src="userInfo.avatarUrl"  alt="">

              <Button v-else open-type = "getUserInfo" @getuserinfo="bindGetUserInfo" class="btn">获取用户信息</Button>
              </div>
              <p class="username" style="text-align: center">hello {{ userInfo.nickName }}</p>
              <div class="start" @click="toBand">
                  <p>开启小程序</p>
              </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        mes: '',
        userInfo: {},
        isShow: false
      }
    },
    beforeMount () {
    },
    methods: {
      bindGetUserInfo () {
        wx.getUserInfo({
          success: (data) => {
            this.userInfo = data.userInfo
            this.$store.dispatch('getOpenId', this.userInfo.nickName)
            console.log(this.userInfo)
            this.isShow = true
          },
          fail: () => {
            console.log('获取失败')
            // eslint-disable-next-line no-unused-expressions
            this.userInfo
          }
        })
      },
      getUserInfo (e) {
        if (e.mp.detail.rawData) {
          this.bindGetUserInfo()
        }
        console.log(e)
      },
      toBand () {
        wx.switchTab({url: '../band/main'})
      }
    }
  }
</script>

<style>
    .index {
        background-image: url("");
        width: 100%;
        height: 100%;
        position: fixed;
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
        flex-direction: column;
    }

    .username {
        color: white;
        font-size: 30px;
        font-weight: bold;
        margin: 100px 0;
    }

    .start {
        color: white;
        background-color: #2aac62;
        width: 200px;
        height: 50px;
        border: 1px solid white;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        margin: 0 auto;
        border-radius: 30px;
        font-weight: bold;

    }

    .btn {
        background-color: #2aac62;
        width: 150px;
        height: 150px;
        color: white;
        border-radius: 75px;
        margin: 0 auto;
        line-height: 150px;
        text-align: center;
        font-size: 20px;
    }
    .login_img{
        width: 150px;
        height: 150px;
        border-radius: 75px;
        margin: 50px auto;
        line-height: 100px;
        text-align: center;
        font-size: 20px;
    }
    .login_img img{
        width: 150px;
        height: 150px;
        border-radius: 75px;
        margin: 50px auto;
        line-height: 100px;
        text-align: center;
        font-size: 20px;
    }
</style>
